<template>
  <section class="w-header">
    <k-icon color="green" size="50"></k-icon>
    <k-button status="success" @click="handle">success</k-button>
    <k-input @click="handle"></k-input>
    <!-- <k-color-picker></k-color-picker> -->
    <k-switch :value="sValue" id="kswitch"></k-switch>
  </section>
</template>

<script setup>
import { onMounted, ref } from 'vue';
let sValue = ref(true);

onMounted(() => {
  const kswitch = document.getElementById('kswitch');
  kswitch.registerEvent('click', value => {
    console.log(value,'=====e')
    sValue.value = value
    // debugger
  })
  console.dir(kswitch)
})


const handle = e => {
  console.log('button')
}

const changeHandle = e => {
  console.log('input')
}

</script>

<style scoped>
.w-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  width: 400px;
}
</style>